<template>
    <div>
        <!-- //title 换成添加和修改 -->
        <el-dialog :title="title" :visible.sync="open" width="26%" append-to-body :before-close="closeDialog">
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="媒体类型" prop="mediaType">
                    <el-select v-model="ruleForm.mediaType" placeholder="请选择媒体类型" style="width:100%;" @change="changeMedia">
                      <el-option v-for="(dict, index) in mediaTypeOption" :key="index" :label="dict.label"
                                 :value="dict.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="转换前格式" prop="beforeFormat">
                    <el-select v-model="ruleForm.beforeFormat" placeholder="请选择转换前格式" style="width:100%;">
                      <el-option v-for="(dict, index) in formatOption" :key="index" :label="dict.label"
                                 :value="dict.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="转换后格式" prop="afterFormat">
                    <el-select v-model="ruleForm.afterFormat" placeholder="请选择转换后格式" style="width:100%;">
                      <el-option v-for="(dict, index) in formatOption" :key="index" :label="dict.label"
                                 :value="dict.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-switch v-model="ruleForm.state" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {getFormatType, addRule, updateRule} from "@/api/cqbc/dataManage/formatConversion";

export default {
    props: ['open', 'info'],
    data() {
        return {
          ruleForm: {
            mediaType: undefined, //转换类型
            beforeFormat: undefined, //转换前格式
            afterFormat: undefined,//转换后格式
            state:0,//状态  0：禁用 1：启用
          },
          rules: {
            mediaType: [
              { required: true, message: '请选择媒体类型', trigger: 'change' }
            ],
            beforeFormat: [
              { required: true, message: '请选择转换前格式', trigger: 'change' }
            ],
            afterFormat: [
              { required: true, message: '请选择转换后格式', trigger: 'change' }
            ],
          },
          mediaTypeOption: [],
          formatOption: [],
          title: ''
        }
    },
    watch: {
      info: {
        handler(val) {
          this.getOption()
          if (val.id != undefined) {
            this.changeMedia(val.mediaType)
            this.title = '修改'
            this.ruleForm = val
          } else {
            this.title = '新增'
          }
        },
        immediate: true,
      },
    },
    created() {

    },
    methods: {
      getOption() {
        getFormatType({
          pId: '0'
        }).then(res=>{
          this.mediaTypeOption = res.rows.map(item=>{
            return {
              value: item.id,
              label: item.format
            }
          })
        })
      },
      changeMedia(value) {
        this.ruleForm.beforeFormat = undefined
        this.ruleForm.afterFormat = undefined
        var str = this.mediaTypeOption.find(item => item.label == value).value
        getFormatType({
          pId: str
        }).then(res=>{
          this.formatOption = res.rows.map(item=>{
            return {
              value: item.id,
              label: item.format
            }
          })
        })
      },
      closeDialog() {
        this.reset()
        this.$emit('closeDialog')
      },
      submitForm(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.beforeFormat == this.ruleForm.afterFormat) {
              this.$modal.msgWarning('转换前后格式一致')
              return
            }
            if (this.ruleForm.id != undefined) {
              updateRule(this.ruleForm).then(response=>{
                this.$modal.msgSuccess('修改成功')
                this.closeDialog()
              })
            } else {
              addRule(this.ruleForm).then(response=>{
                this.$modal.msgSuccess('添加成功')
                this.closeDialog()
              })
            }
          } else {
            return false;
          }
        });
      },
      reset(){
        this.resetForm('ruleForm')
        this.ruleForm = {
          mediaType: undefined, //转换类型
          beforeFormat: undefined, //转换前格式
          afterFormat: undefined,//转换后格式
          state:0,//状态  0：禁用 1：启用
        }
      },
    }
}
</script>
<style scoped>
    ::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>
